<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script type="text/javascript" src="/layui/layui.js"></script>
</head>
<body>

<div>
    <button type="button" class="layui-btn" lay-submit lay-filter="addlayui">添加</button>
    <button type="button" class="layui-btn"><a href="/sysLog/export">导出</a></button>
</div>

<table id="demo" lay-filter="test"></table>
<script src="/layui/layui.js"></script>
</body>

<!--查看用户信息-->
<form class="layui-form" action="" id="select" style="display: none">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="type"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">文本</label>
                    <div class="layui-input-block">
                        <input type="text" name="text"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">ip地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="ip"  autocomplete="off"  class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                           <input type="text" name="param"   autocomplete="off" class="layui-input">
                        </div>
                </div>
            </div>
            </div>
        </div>
    </div>
</form>


    <!--//用户添加-->
    <form class="layui-form" action="" id="insert" style="display: none">
        <form class="layui-form" action="">
        <div class="layui-container">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-block">
                            <input type="text" name="type"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-block">
                            <input type="text" name="userName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">文本</label>
                        <div class="layui-input-block">
                            <input type="text" name="text"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">ip地址</label>
                        <div class="layui-input-block">
                            <input type="text" name="ip"  autocomplete="off"  class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-col-md4">
                    <div class="layui-form-item">
                        <label class="layui-form-label">描述</label>
                        <div class="layui-input-block">
                            <input type="text" name="param"   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
            <div >
                <button type="button" class="layui-btn" lay-submit lay-filter="add" style="margin: auto">添加</button>
            </div>
        </form>
        </div>
    </form>


<!--//用户更新-->
<form class="layui-form" action="" id="updatelayui" style="display: none">
    <form class="layui-form" action="">
        <input type="hidden" name="id">
        <div class="layui-container">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">类型</label>
                    <div class="layui-input-block">
                        <input type="text" name="type"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-block">
                        <input type="text" name="userName" autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-row">
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">文本</label>
                    <div class="layui-input-block">
                        <input type="text" name="text"  autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">ip地址</label>
                    <div class="layui-input-block">
                        <input type="text" name="ip"  autocomplete="off"  class="layui-input">
                    </div>
                </div>
            </div>
            <div class="layui-col-md4">
                <div class="layui-form-item">
                    <label class="layui-form-label">描述</label>
                    <div class="layui-input-block">
                        <input type="text" name="param"   autocomplete="off" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        </div>
        <div >
            <button type="button" class="layui-btn" lay-submit lay-filter="update" style="margin: auto">更新</button>
        </div>
    </form>
    </div>
</form>

</html>


<script>
    layui.use(['form','table','layer'], function(){
        var form = layui.form;     //控制表单
        var table = layui.table;   //控制表格
        var $= layui.$  //Jquery对象
        var layer =layui.layer;   //控制弹出层

        //第一个实例
        table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/sysLog/list/' //数据接口
            ,page: true //开启分页
            ,cellMinWidth: 200 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[ //表头
                {field: 'id', title: 'ID',  sort: true, fixed: 'left'}
                ,{field: 'userName', title: '用户名'}
                ,{field: 'ip', title: 'ip地址', sort: true}
                ,{field: 'type', title: '类型'}
                ,{field: 'text', title: '文本'}
                ,{field: 'param', title: '描述', sort: true}
                ,{field: 'createTime', title: '创建时间',  sort: true}
                ,{fixed: 'right', width:200, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            ]]
        });


        table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

            if(layEvent === 'detail'){ //查看

                $("input[name='userName']").val(data.userName)
                $("input[name='ip']").val(data.ip)
                $("input[name='type']").val(data.type)
                $("input[name='text']").val(data.text)
                $("input[name='param']").val(data.param)

                layer.open({
                    type: 1,
                    title: '查看',
                    content: $('#select'),
                    area: ['1200px','500px']
                });


                //do somehing
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){

                    $.ajax({
                        url: "/sysLog/delete?id="+data.id,
                        type: "GET",
                        dataType: "json",
                        success: function (data) {
                            console.log("删除成功")
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                        }
                    })

                });
            } else if(layEvent === 'edit'){ //编辑
                //do something

                $("input[name='userName']").val(data.userName)
                $("input[name='ip']").val(data.ip)
                $("input[name='type']").val(data.type)
                $("input[name='text']").val(data.text)
                $("input[name='param']").val(data.param)

                layer.open({
                    type: 1,
                    title: '用户更新',
                    content: $('#updatelayui'),
                    area: ['1200px','500px']
                });

                form.on('submit(update)', function (data) {    //from表单中提交的按钮的id
                    $.ajax({
                        type: 'POST',
                        url: '/sysLog/update',
                        datatype: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data.field),     //修改后的值
                        success: function (res) {     //成功后的回调函数  res返回的数据
                            console.log(res)
                            if (res.code == '0') {
                                layer.msg("更新成功")
                                obj.update({
                                    id: data.field.id,
                                    userName: data.field.userName,
                                    ip: data.field.ip,
                                    type: data.field.type,
                                    text: data.field.text,
                                    param: data.field.param,
                                });

                            }
                        }
                })
                //同步更新缓存对应的值
            })
            }
                else
                    if (layEvent === 'LAYTABLE_TIPS') {
                        layer.alert('Hi，头部工具栏扩展的右侧图标。');
                }
        });



        //添加按钮
        form.on('submit(addlayui)', function (data) {    //点击添加按钮是触发弹出


            layer.open({
                type: 1,
                title: '用户添加',
                content: $('#insert'),     //弹出from表单的id
                area: ['1200px','500px']
            });
        });
        form.on('submit(add)', function (data) {    //from表单中提交的按钮的id
            $.ajax({
                type:'POST',
                url: '/sysLog/add',
                datatype:"json",
                contentType:"application/json",
                data: JSON.stringify(data.field),
                success:function (res) {     //成功后的回调函数  res返回的数据
                    console.log(res)
                    if (res.code=='0'){
                        layer.msg("添加成功")
                    }
                }
            })

        });



    });
</script>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>


<style>
    a:active {color: red; }
    a:link {color: blue; text-decoration:none;}
    a:hover {color: red; text-decoration:underline;}
    a:visited {color:purple;text-decoration:none;}
</style>